<template>
  <div
    class="areaWarpper"
    v-loading="areaLoading"
    :class="areaStyle()"
    ref="neuArea"
  >
    <div v-if="title" class="titleWarpper">
      <div class="tipsWarpper">
        <div class="tips" />
        <div class="title">{{ title }}</div>
        <div class="textExpain">
          <slot name="textExpain" />
        </div>
      </div>

      <div class="toolbar" :class="isExpand ? 'toolbarExpand' : ''">
        <slot name="toolbar" />
      </div>
      <div
        class="expandBtn"
        v-if="isExpand"
        @click="expand = !expand"
        :title="expand ? '收起' : '展开'"
      >
        <i
          class="iconfont"
          :class="expand ? 'iconzhankai2-copy' : 'iconzhankai2'"
        />
      </div>
    </div>
    <div class="main" v-if="expand" v-loading="mainLoading">
      <slot name="main" />
      <div v-if="loading" style="height: 20px" />
    </div>
  </div>
</template>

<script>
export default {
  name: "com-area",
  props: {
    title: {
      type: String,
      default: () => {
        return "";
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    isTitleLoading: {
      type: Boolean,
      default: true
    },
    loadingSize: {
      type: Number,
      default: () => {
        return 2;
      }
    },
    isExpand: {
      type: Boolean,
      default: false
    },
    auto: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  data() {
    return {
      areaLoading: false,
      mainLoading: false,
      expand: true
    };
  },
  watch: {
    loading(newVal) {
      if (this.isTitleLoading) {
        this.areaLoading = newVal;
      } else {
        this.mainLoading = newVal;
      }
    }
  },
  methods: {
    areaStyle() {
      let result =
        this.loadingSize === 2
          ? "loadingBig"
          : this.loadingSize === 1
          ? "loadingMedium"
          : "loadingSmall";
      if (!this.title) {
        result = result + " areaWarpperAddPadding";
      }
      if (this.auto) {
        result += " auto";
      }
      return result;
    }
  }
};
</script>

<style scoped lang="scss">
.areaWarpperAddPadding {
  padding-top: 10px !important;
}

.areaWarpper {
  width: 100%;
  padding: 0 10px 10px 10px;
  background-color: white;

  .titleWarpper {
    height: 50px;
    min-height: 16px;
    text-align: right;
    position: relative;

    .tipsWarpper {
      margin-top: 16px;
      margin-bottom: 16px;
      height: 16px;
      line-height: 16px;
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;

      .tips {
        width: 6px;
        background: #1b65b9;
        height: 16px;
        display: inline-block;
        vertical-align: top;
      }

      .title {
        margin-left: 4px;
        font-size: 16px;
        font-weight: bold;
        font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif,
          "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB";
        display: inline-block;
        vertical-align: top;
      }
    }

    .textExpain {
      color: #1b65b9;
      display: inline-block;
      vertical-align: top;
      margin-left: 24px;
    }

    .toolbar {
      display: inline-block;
    }
  }
}

.areaWarpper + .areaWarpper {
  margin-top: 12px;
}

::v-deep .loadingBig {
  ::v-deep.el-loading-spinner {
    width: 64px;
    height: 64px;
  }
}

::v-deep .loadingMedium {
  ::v-deep.el-loading-spinner {
    width: 36px;
    height: 36px;
  }
}

::v-deep .loadingSmall {
  ::v-deep.el-loading-spinner {
    width: 18px;
    height: 18px;
  }
}

.expandBtn {
  width: 24px;
  height: 24px;
  color: #c0c4cc;
  position: absolute;
  right: 15px;
  top: 10px;
  cursor: pointer;
  i {
    font-size: 24px;
  }
}

.auto {
  // height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;

  .main {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .titleWarpper {
    flex: 0 0 50px;
  }

  ::v-deep .com-table-win {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    background: #ffffff;

    ::v-deep .el-icon-arrow-down:before {
      content: "\e663";
      color: #1b65b9;
      font-family: "iconfont" !important;
      font-size: 12px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }

  ::v-deep .el-table {
    font-size: 14px;
    color: #606266;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
  }

  ::v-deep .el-table__body-wrapper {
    overflow-x: auto;
    flex: 1;
    min-height: 100px;
  }

  ::v-deep .neuPagination {
    position: relative;
    background: white;
    width: calc(100% - 30px);
    z-index: 1200;
    // padding: 10px 0;
    // margin-left: -10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 40px;

    .page_total {
      font-size: 13px;
      color: #606266;
      padding: 2px 5px;
      line-height: 20px;
    }
  }
}
</style>
